<template>
    <layout>
        <mt-header fixed title="我的互动">
            <a href="javascript:window.history.go(-1);" slot="left">
                <mt-button  icon="back"></mt-button>
            </a>
        </mt-header>

    	<mt-navbar fixed v-model="selected">
				<mt-tab-item id="1">社区</mt-tab-item>
				<mt-tab-item id="2">帖子</mt-tab-item>
				<mt-tab-item id="3">问答</mt-tab-item>
		</mt-navbar>

        <div  class="list_box">
            <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
                <ul :class="ulClass"
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="loading"
                    infinite-scroll-distance="50" id="content">
                    <template v-if="selected == '1'">
                        <li v-for="(item, index) in list">
                            <a :href="'/forum/topic/' + item.id" class="list-box">
                            <div class="top_img">
                                <img :src="showImage(item.icon, '?x-oss-process=image/resize,m_lfit,w_100')"/>
                            </div>
                            <div class="top_con">
                                <div class="title">{{ item.name }}</div>
                                <div class="posn">人气{{ item.userCount }} &nbsp;帖子{{ item.postCount }}</div>
                                <div class="english">{{ item.name }}</div>
                            </div>
                            </a>
                            <div class="top_r">
                                <div class="comtent_r" @click="del(index)">
                                    <div class="icon-shanchu"></div>
                                </div>
                            </div>
                        </li>
                    </template>

                    <template v-if="selected == '2'">
                        <li v-for="(item, index) in list">

                            <a :href="'/forum/detail/' + item.id" class="conetnt">
                                <div class="comtent_top">
                                    <div class="comtent_l"><img :src="showImage(item.headImgUrl, '?x-oss-process=image/resize,m_fixed,h_100,w_100')"/></div>
                                    <div class="comtent_c">{{ item.name }}</div>
                                    <div class="top_r">
                                    <div class="comtent_r" @click="del(index)">
                                        <div class="icon-shanchu"></div>
                                    </div>
                            </div>
                                </div>
                                <div class="meark">
                                    <div class="c_top">{{ item.title }}</div>
                                    <div class="c_img" v-if="item.images.length > 0">
                                        <img v-for="img in item.images"  v-if="item.images.length < 2" style="height: 3.2rem;"  :src="showImage(img, '?x-oss-process=image/resize,m_lfit,w_400')"/>
                                        <img v-for="img in item.images"  v-if="item.images.length > 1" style="height: 1.6rem;"  :src="showImage(img, '?x-oss-process=image/resize,m_lfit,w_300')"/>
                                    </div>
                                    <div class="c_fot">
                                        <div class="c_left">
                                            <div>{{ item.postLikeCount }}赞</div>
                                            <div>{{ item.commentCount }}评论</div>
                                        </div>
                                        <div class="c_right">{{ item.createDate }}</div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </template>

                    <template v-if="selected == '3'">
                        <li v-for="(item, index) in list">
                            <div class="conetnt_r">
                                <div class="comtent_top">
                                    <div class="comtent_l"><img :src="showImage(item.headImgUrl, '?x-oss-process=image/resize,m_fixed,h_100,w_100')"/></div>
                                    <div class="comtent_c">{{ item.name }}</div>
                                    <div class="comtent_r" @click="del(index)">
                                    	<div class="icon-shanchu"></div>
                                    </div>
                                </div>

                                <div class="meark">
                                    <div class="c_top">{{ item.title }}</div>
                                    <div class="c_fot">
                                        <div class="c_left">
                                            <div>{{ item.postLikeCount }}赞</div>
                                            <div>{{ item.commentCount }}评论</div>
                                        </div>
                                        <div class="c_right">{{ item.createDate }}</div>
                                    </div>

                                </div>

                            </div>
                        </li>
                    </template>
                </ul>
                <p v-show="loading" class="page-infinite-loading">
                    <mt-spinner :size="20" type="fading-circle"></mt-spinner>
                    <span>加载中...</span>
                </p>
            </div>
        </div>

    </layout>
</template>
<style lang="scss">
    @import "index.scss";
</style>
<script type="text/babel">
    import { api, image } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                loading: false,
                wrapperHeight: 0,
                list: [],
				selected: '1',
				isShow:false,
                forumList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                },
                postList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                },
                answerList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                }

            }
        },
        computed: {
            api(){
                return api();
            },
            ulClass(){
                if (this.selected == '2'){
                    return "active_w";
                }else if (this.selected == '3'){
                    return "active_s";
                }
                return "top_title";
            }
        },
        watch: {
            selected: function () {
                // let scrollHeight = 0;
                if (this.selected == '2'){
                    this.list = this.postList.list;
                }else if (this.selected == '3'){
                    this.list = this.answerList.list;
                }else{
                    this.list = this.forumList.list;
                }
                if (this.list.length == 0){
                    window.scrollTo(0, 0);
                    this.loadMore();
                }
            }
        },
        methods: {
            showImage(url, params){
                return image(this.api.image, url, params);
            },
            del(index){
                let params = {};

                if (this.selected == '1'){
                    params.id = this.forumList.list[index].id;
                }else if (this.selected == '2'){
                    params.id = this.postList.list[index].id;
                }else {
                    params.id = this.answerList.list[index].id;
                }

                Mint.Indicator.open();
                this.$http.get('/api/collect/delete', {
                    params: params
                }).then((response) => {
                    Mint.Indicator.close();
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            if (this.selected == '1'){
                                this.forumList.list.splice(index, 1);
                            }else if (this.selected == '2'){
                                this.postList.list.splice(index, 1);
                            }else {
                                this.answerList.list.splice(index, 1);
                            }
                            Mint.Toast('删除成功');
                        }else{
                            Mint.Toast('删除失败');
                        }
                    }else{
                        Mint.Toast('删除失败');
                    }
                });
            },
            loadMore(){
                if (this.loading){
                    return;
                }
                if (this.selected == '1'){
                    if (this.forumList.lastPage){
                        return;
                    }
                    this.loading = true;
                    this.$http.get('/api/collect/list', {
                        params: {
                            type: this.selected,
                            pageNo: this.forumList.nextPage
                        }
                    }).then((response) => {
                        if (response.status == 200){
                            let data = response.data;
                            if (data.code == 200) {
                                data = data.data;
                                this.forumList.lastPage = data.lastPage;
                                this.forumList.pageNo = data.pageNo;
                                this.forumList.nextPage = data.nextPage;

                                let list = data.list;
                                for (let i = 0; i < list.length; i++){
                                    this.forumList.list.push(list[i]);
                                }
                                this.list = this.forumList.list;
                            }

                        }else{
                            this.forumList.lastPage = true;
                        }
                        this.loading = false;
                    });
                }else if (this.selected == '2'){
                    if (this.postList.lastPage){
                        return;
                    }
                    this.loading = true;
                    this.$http.get('/api/collect/list', {
                        params: {
                            type: this.selected,
                            pageNo: this.postList.nextPage
                        }
                    }).then((response) => {
                        if (response.status == 200){
                            let data = response.data;
                            if (data.code == 200) {
                                data = data.data;
                                this.postList.lastPage = data.lastPage;
                                this.postList.pageNo = data.pageNo;
                                this.postList.nextPage = data.nextPage;

                                let list = data.list;
                                for (let i = 0; i < list.length; i++){
                                    this.postList.list.push(list[i]);
                                }
                                this.list = this.postList.list;
                            }

                        }else{
                            this.postList.lastPage = true;
                        }
                        this.loading = false;
                    });
                }else if (this.selected == '3'){
                    if (this.answerList.lastPage){
                        return;
                    }
                    this.loading = true;
                    this.$http.get('/api/collect/list', {
                        params: {
                            type: this.selected,
                            pageNo: this.answerList.nextPage
                        }
                    }).then((response) => {
                        if (response.status == 200){
                            let data = response.data;
                            if (data.code == 200) {
                                data = data.data;
                                this.answerList.lastPage = data.lastPage;
                                this.answerList.pageNo = data.pageNo;
                                this.answerList.nextPage = data.nextPage;

                                let list = data.list;
                                for (let i = 0; i < list.length; i++){
                                    this.answerList.list.push(list[i]);
                                }
                                this.list = this.answerList.list;
                            }

                        }else{
                            this.answerList.lastPage = true;
                        }
                        this.loading = false;
                    });
                }
            },

		},
        created(){
        },
        mounted() {
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        }
    }
</script>

